<template>
	<view class="">
		<view class="juan">
			<image :src="imgurl+'/juan.png'"  mode=""></image>
			<view class="abs">
				<image :src="imgurl+'/ren.png'" mode=""></image>
				<view class="t1">{{price}}</view>
				<view class="ts">消费券(元)</view>
			</view>
		</view>
		<view class="test">
			新用户专享绿色消费券
		</view>
		<view class="swipe">
			<swiper :autoplay="true" vertical circular :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="swiper-item">
						{{item.userName}}刚刚免费领取了{{item.amount}}元新人礼包消费券
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view v-if="isnow" class="btn" @click="pageconsumer">
			立即查看
		</view>
		<view v-else class="btn" @click="open">
			立即领取
		</view>
		
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="imgbcg">
					<image class="img" src="../static/ljuan5.png" mode=""></image>
					<view class="abs">
						<image src="../static/ljuan6.png" mode=""></image>
						<view class="t1">
							{{price}}
						</view>
						<view class="t2">
						 消费劵（元）
						</view>
						<view class="ts">
							<view class="we">
								优惠多多~快去使用吧~
							</view>
							<view class="t"></view>
						</view>
						<view class="btn" @click="gouser">
							去使用
						</view>
					</view>
				</view>
				<view class="close" @click="close">
					<uni-icons size="40" color="#fff" type="close"></uni-icons>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		inviteRegister,
		inviteList,
		userCheckReceive
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				imgurl:getApp().globalData.WEBIMG,
				price:0,
				swiperList:[],
				isnow:false
			};
		},
		onShow() {
			uni.setStorageSync('isHttp', false)
			if (uni.getStorageSync('userToken')) {
				userCheckReceive({}).then(res=>{
					this.isnow = res.data
				})
			}
		},
		onLoad(option) {
			uni.setStorageSync('userinviteId',option.inviteId)
			inviteRegister({}).then(res=>{
				this.price= res.data.amount
			})
			inviteList({
				pageNum: 1,
				pageSize: 100
			}).then(res => {
				this.swiperList = res.data
			})
			
		},
		methods:{
			close(){
				this.$refs.popup.close()
			},
			open(){
				uni.navigateTo({
					url:`/pages/login/login`
				})
			},
			pageconsumer(){
				this.$refs.popup.open()
			},
			gouser(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url('https://shop.haooookan.cn/hhk-shop-api/profile/wechat_mini/bcg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.juan {
		width: 526rpx;
		height: 292rpx;
		margin: 310rpx auto 34rpx;
		position: relative;

		image {
			width: 526rpx;
			height: 292rpx;
		}

		.abs {
			position: absolute;
			top: 0%;
			width: 526rpx;
			height: 292rpx;
			.t1{
				font-family:'DINB';
				font-size: 72rpx;
				color: #000000;
				text-align: center;
			}
			.ts{
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
			}
			image {
				width: 284rpx;
				height: 84rpx;
				margin-top: 38rpx;
				margin-left: 146rpx;
			}
		}
	}
	.test{
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #000000;
		text-align: center;
	}
	
	.swipe {
		width: 668rpx;
		height: 48rpx;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		swiper {
			height: 48rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #000000;
			line-height: 48rpx;
			text-align: center;
		}
	}
	.btn{
		width: 670rpx;
		height: 100rpx;
		background: #000000;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		margin: 40rpx auto;
	}
	
	.popup{
		.close {
			margin-top: 6rpx;
			text-align: center;
		}
		.imgbcg{
			width: 630rpx;
			height: 560rpx;
			position: relative;
			.img{
				width: 630rpx;
				height: 560rpx;
			}
			.abs{
				position: absolute;
				width: 630rpx;
				height: 560rpx;
				top: 0%;
				padding: 84rpx 94rpx 54rpx 94rpx;
				box-sizing: border-box;
				text-align: center;
				image{
					width: 284rpx;
					height: 84rpx;
					margin-left: 40rpx;
				}
				.t1 {
					font-family: 'FINE';
					font-weight: bold;
					font-size: 72rpx;
					line-height: 70rpx;
				}
				.t2{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
					margin-top: 6rpx;
				}
				.ts {
					width: 380rpx;
					height: 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
					margin: 10rpx auto;
					position: relative;
					.we {
						position: absolute;
						z-index: 9;
						font-size: 28rpx;
						left: 50rpx;
					}
					.t {
						width: 380rpx;
						height: 12rpx;
						background: #38CDA5;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						position: absolute;
						bottom: 0rpx;
					}
				}
				.btn{
					margin-top: 74rpx;
					width: 442rpx;
					height: 92rpx;
					background: #000000;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 92rpx;
				}
				
			}
		}
	}
</style>